<template>
	<view>
		<view class="tiaojian">
			<view :class="id==item.id?'active':''" v-for="item in xuanze" :key="item.id" @click="fresh(item.id)">
				{{item.item}}
			</view>

		</view>
		<view class="dingdan-box">
			<view class="dingdan-item">
				<view class="dingdan-top">
					<view class="dingdan-bianhao">
						订单编号：1234567
					</view>
					<view class="dingdan-zhuangtai">
						已完成
					</view>
				</view>
				<view class="dingdan-goods">
					<view class="goods-left">
						<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/shouji.png"
						 mode="aspectFit" class="goods-left"></image>
					</view>

					<view class="goods-right">
						<view class="goods-right-top">
							<view class="goods-name twoLines">
								华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机
							</view>
							<view class="goods-right-top-r">
								<view class="">
									<label class="goods-newjifen">200</label> 积分
								</view>
								<view class="num">
									X1
								</view>
							</view>
						</view>


						<view class="goods-chicun">
							尺寸:6.39英寸 内存:8GB+128GB
						</view>
						<view class="goods-yanse">颜色:幻夜黑</view>
						<view class="goods-xijie">
							商城无忧购 7天无理由退货
						</view>
					</view>
				</view>
				<view class="dingdan-goods">
					<view class="goods-left">
						<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/shouji.png"
						 mode="aspectFit" class="goods-left"></image>
					</view>

					<view class="goods-right">
						<view class="goods-right-top">
							<view class="goods-name twoLines">
								华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机
							</view>
							<view class="goods-right-top-r">
								<view class="">
									<label class="goods-newjifen">200</label> 积分
								</view>
								<view class="num">
									X1
								</view>
							</view>
						</view>

						<view class="goods-chicun">
							尺寸:6.39英寸 内存:8GB+128GB
						</view>
						<view class="goods-yanse">颜色:幻夜黑</view>
						<view class="goods-xijie">
							商城无忧购 7天无理由退货
						</view>
					</view>
				</view>

				<view class="dingdan-bot">
					<view class="shangpinshuliang">
						共2件商品 合计:<label class="jifen">1888</label>积分
					</view>
					<view class="dingdan-pingjia">
						评价
					</view>
				</view>
			</view>
			<view class="dingdan-item">
				<view class="dingdan-top">
					<view class="dingdan-bianhao">
						订单编号：1234567
					</view>
					<view class="dingdan-zhuangtai">
						已完成
					</view>
				</view>
				<view class="dingdan-goods">
					<view class="goods-left">
						<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/shouji.png"
						 mode="aspectFit" class="goods-left"></image>
					</view>

					<view class="goods-right">
						<view class="goods-right-top">
							<view class="goods-name twoLines">
								华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机
							</view>
							<view class="goods-right-top-r">
								<view class="">
									<label class="goods-newjifen">200</label> 积分
								</view>
								<view class="num">
									X1
								</view>
							</view>
						</view>


						<view class="goods-chicun">
							尺寸:6.39英寸 内存:8GB+128GB
						</view>
						<view class="goods-yanse">颜色:幻夜黑</view>
						<view class="goods-xijie">
							商城无忧购 7天无理由退货
						</view>
					</view>
				</view>
				<view class="dingdan-bot">
					<view class="shangpinshuliang">
						共2件商品 合计:<label class="jifen">1888</label>积分
					</view>
					<view class="dingdan-pingjia">
						评价
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 1,
				xuanze: [{
					item: "全部",
					id: 1
				}, {
					item: "待发货",
					id: 2
				}, {
					item: "待收货",
					id: 3
				}, {
					item: "评价",
					id: 4
				}],
			};
		},
		methods: {
			fresh(id) {
				this.id = id;

			},
		}
	}
</script>

<style>
	.tiaojian {
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		height: 40px;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}

	.tiaojian view {
		line-height: 37px;
		color: rgba(153, 153, 153, 1);

	}

	.tiaojian .active {
		border-bottom: 3px solid #c49c5a;
		color: rgba(196, 156, 90, 1);
	}

	.dingdan-top,
	.dingdan-bot {
		height: 39px;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		display: flex;
		flex-direction: row;
		padding: 0 30upx;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
	}

	.dingdan-zhuangtai {
		color: rgba(196, 156, 90, 1)
	}

	.dingdan-item {
		margin-top: 10px;
		background: rgb(255, 255, 255);
	}

	.dingdan-goods {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 20upx 10px 30upx;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}

	.goods-left {
		height: 100px;
		width: 100px;

	}

	.goods-right {
		padding-left: 30upx;
		flex: 1;
	}

	.goods-right-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.goods-name {
		font-size: 15px;
		width: 303upx;
		font-weight: bold;
	}

	.goods-right-top-r {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.goods-right-top-r .num {
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
	}

	.goods-newjifen {

		font-weight: bold;

		line-height: 19px;
	}

	.goods-xijie {
		font-size: 12px;

		color: rgba(196, 156, 90, 1);
	}

	.goods-chicun,
	.goods-yanse {
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
	}

	.dingdan-pingjia {
		width: 50px;
		height: 25px;
		border: 1px solid rgba(196, 156, 90, 1);
		border-radius: 25px;
		text-align: center;
		line-height: 25px;
		color: rgba(196, 156, 90, 1);
	}

	.jifen {
		font-size: 14px;
		font-weight: bold;
		margin: 0 3px;
	}
</style>
